﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>参数管理</title>

    <link href="../css/site.css" rel="stylesheet" />
    <style type="text/css">
        .divContent {
            width: 800px;
            height: 600px;
            /*margin-left: auto;
            margin-right:auto;*/
            position: absolute;
            right: 0;
            left: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

        .prjEditShade {
            background-color: gray;
            opacity: 0.5;
            visibility: hidden;
        }

        .prjEdit {
            width: 600px;
            height: 320px;
            /*margin-left: auto;
            margin-right:auto;*/
            position: absolute;
            right: 0;
            left: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            background-color: white;
            visibility: hidden;
            /*visibility: visible;*/
        }
    </style>

    <script src="../lib/jquery/dist/jquery.js"></script>
    <script src="../js/config.js"></script>
    <script src="../js/site.js"></script>
    <script type="text/javascript">
        function RefreshProjects() {
            try {
                var url = config.conf.baseUrl + "Project/pageSize=" + config.conf.projectPageSize + "&pageIndex=-1";
                var token = sessionStorage.getItem('token');
                $.ajax({
                    type: "GET",
                    url: url,
                    headers:
                    {
                        "access_token": token//此处放置请求到的用户token
                    },
                    contentType: "application/json; charset=utf-8",
                    //dataType: "json",
                    success: function (data, status) {
                        clearTable("tbPrjs", true);

                        if (data.status != constDefine.DB_SUCESS) {
                            alert("刷新项目列表失败,原因:" + data.reason);
                            return;
                        }

                        var tbPrjs = $("#tbPrjs");
                        for (var i = 0; i < data.value.length; i++) {
                            var prjItem = data.value[i];
                            //var row = "<tr>" + "<td>" + SkuCode + "</td>" + "<td>" + Sn + "</td>" + "</tr>";
                            var row = $('<tr id="tr_' + prjItem.id + '"></tr>');

                            var tdId = $("<td></td>");
                            tdId.append(i + 1);
                            row.append(tdId);

                            var tdPrjName = $('<td id="td_' + prjItem.id + '_name"></td>');
                            tdPrjName.append(prjItem.name);
                            row.append(tdPrjName);

                            var tdPrjAlias = $("<td></td>");
                            tdPrjAlias.append(prjItem.alias);
                            row.append(tdPrjAlias);

                            var tdPrjDes = $("<td></td>");
                            tdPrjDes.append(prjItem.des);
                            row.append(tdPrjDes);

                            var tdEdit = $("<td></td>");
                            var editHtml = '<input type="button" class="editButton" value="编辑" onclick="prjModify(' + prjItem.id + ')" />' +
                                '<input type="button" class="editButton" value="删除" onclick="prjDelete(' + prjItem.id + ')" />' +
                                '<input type="button" class="editButton" value="配置" onclick="prjConfig(' + prjItem.id + ')" />';
                            tdEdit.append(editHtml);
                            row.append(tdEdit);

                            tbPrjs.append(row);
                        }
                    },
                    error: function (xhr) {
                        ajaxErr(xhr);
                    }
                });
            }
            catch (ex) {
                alert(ex.error);
            }
        }

        function showPrjEdit() {
            $("#prjEdit").css("visibility", "visible");
            $("#prjEditShade").css("visibility", "visible");
        }

        function hidenPrjEdit() {
            $("#prjEdit").css("visibility", "hidden");
            $("#prjEditShade").css("visibility", "hidden");
        }

        function prjModify(id) {
            try {
                var url = config.conf.baseUrl + "Project/id=" + id;
                var token = sessionStorage.getItem('token');
                $.ajax({
                    type: "GET",
                    url: url,
                    headers:
                    {
                        "access_token": token//此处放置请求到的用户token
                    },
                    contentType: "application/json; charset=utf-8",
                    //dataType: "json",
                    success: function (data, status) {
                        if (data.status != constDefine.DB_SUCESS) {
                            alert("查询项目信息失败,原因:" + data.reason);
                            return;
                        }

                        $("#txtPrjName").val(data.value.name);
                        $("#txtPrjAlias").val(data.value.alias);
                        $("#txtPrjDes").val(data.value.des);
                        sessionStorage.setItem(constDefine.prjIdKey, id);
                        showPrjEdit();
                    },
                    error: function (xhr) {
                        ajaxErr(xhr);
                    }
                });
            }
            catch (ex) {
                alert(ex.error);
            }
        }

        function prjDelete(id) {
            try {
                var tdPrjNameId = 'td_' + id + '_name';
                var prjName = $("#" + tdPrjNameId)[0].innerText;

                if (!window.confirm('你确定要删除项目[' + prjName + ']吗？')) {
                    return;
                }

                var url = config.conf.baseUrl + "Project/id=" + id;
                var token = sessionStorage.getItem('token');
                $.ajax({
                    type: "DELETE",
                    url: url,
                    headers:
                    {
                        "access_token": token//此处放置请求到的用户token
                    },
                    contentType: "application/json; charset=utf-8",
                    //dataType: "json",
                    success: function (data, status) {
                        if (data.status != constDefine.DB_SUCESS) {
                            alert("删除项目失败,原因:" + data.reason);
                            return;
                        }

                        RefreshProjects();
                    },
                    error: function (xhr) {
                        ajaxErr(xhr);
                    }
                });
            }
            catch (ex) {
                alert(ex.error);
            }
        }

        function prjConfig(id) {
            sessionStorage.setItem(constDefine.prjIdKey, id);
            sessionStorage.setItem(constDefine.paraConfigSelectedIdKey, -1);
            window.location.href = "/htmls/paraConfig.html";
        }

        $(document).ready(function () {
            pageLoginValidate();

            //页面加载完成后查询项目列表
            RefreshProjects();

            //添加项目
            $("#btnAddPrj").click(function () {
                $("#txtPrjName").val("");
                $("#txtPrjAlias").val("");
                $("#txtPrjDes").val("");
                sessionStorage.setItem(constDefine.prjIdKey, '-1');
                showPrjEdit();
            });

            $("#btnEditPrjCancell").click(function () {
                hidenPrjEdit();
            });

            $("#btnEditPrjOk").click(function () {
                var prjName = $("#txtPrjName").val();
                if (prjName == null || prjName == "") {
                    alert("项目名称不能为空");
                    return;
                }

                var prjAlias = $("#txtPrjAlias").val();
                if (prjAlias == null || prjAlias == "") {
                    alert("项目别名不能为空");
                    return;
                }

                var prjDes = $("#txtPrjDes").val();
                if (prjDes == null) {
                    prjDes = "";
                }

                var prjId = Number(sessionStorage.getItem(constDefine.prjIdKey));
                var type;
                //prjId<0为添加项目
                if (prjId < 0) {
                    type = "POST";
                }
                else {
                    type = "PUT";
                }

                var url = config.conf.baseUrl + "Project";
                var data = '{"ID":' + prjId + ',"Alias":"' + prjAlias + '","Name":"' + prjName + '","Des":"' + prjDes + '"}';
                var token = sessionStorage.getItem('token');
                $.ajax({
                    type: type,
                    url: url,
                    data: data,
                    contentType: "application/json; charset=utf-8",
                    headers:
                    {
                        "access_token": token//此处放置请求到的用户token
                    },
                    //dataType: "json",
                    success: function (data, status) {
                        if (data.status != constDefine.DB_SUCESS) {
                            alert("提交项目信息失败,原因:" + data.reason);
                            return;
                        }

                        hidenPrjEdit();
                        RefreshProjects();
                    },
                    error: function (xhr) {
                        ajaxErr(xhr);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div class="divContent contentBackgroundColor">
        <p style="text-align:center;font-size:40px;color:cadetblue;background-color:antiquewhite;margin-top:0px">项目列表</p>

        <table id="tbPrjs" class="table">
            <tr>
                <th style="width:80px;">序号</th>
                <th style="width:200px;">项目名称</th>
                <th style="width:120px;">项目别名</th>
                <th style="width:240px;">项目描述</th>
                <th style="width:160px;">编辑</th>
            </tr>
            <!--<tr>
                <td>1</td>
                <td>RDPS</td>
                <td>RDPSA</td>
                <td>Des RDPS</td>
                <td>
                    <input type="button" value="编辑" onclick="prjEdit(1)" />
                    <input type="button" value="删除" onclick="prjDelete(1)" />
                    <input type="button" value="配置" onclick="prjConfig(1)" />
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>RDPS</td>
                <td>RDPSA</td>
                <td>Des RDPS</td>
                <td>
                    <input type="button" value="编辑" />
                    <input type="button" value="删除" />
                    <input type="button" value="配置" />
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>RDPS</td>
                <td>RDPSA</td>
                <td>Des RDPS</td>
                <td>
                    <input type="button" value="编辑" />
                    <input type="button" value="删除" />
                    <input type="button" value="配置" />
                </td>
            </tr>
            <tr>
                <td>4</td>
                <td>RDPS</td>
                <td>RDPSA</td>
                <td>Des RDPS</td>
                <td>
                    <input type="button" class="editButton" value="编辑" />
                    <input type="button" value="删除" />
                    <input type="button" value="配置" />
                </td>
            </tr>-->
        </table>

        <button id="btnAddPrj" class="AddButton">添加项目</button>

    </div>

    <div id="prjEditShade" class="divContent prjEditShade">

    </div>

    <div id="prjEdit" class="prjEdit">
        <style type="text/css">
            div {
                margin-left: 20px;
                margin-top: 20px;
            }

            .inputPrj {
                width: 330px;
            }
        </style>
        <p class="ptitle" style="margin-top:30px;">编辑项目信息</p>
        <div>
            <span class="spanLabel_TextAlign_Right">项目名称</span>
            <span><input type="text" class="inputPrj inputText" id="txtPrjName" value="" /></span>
            <span class="spanLabel_Prompt">*项目名称</span>
        </div>

        <div>
            <span class="spanLabel_TextAlign_Right">项目别名</span>
            <span><input type="text" class="inputPrj inputText" id="txtPrjAlias" value="" /></span>
            <span class="spanLabel_Prompt">*客户端请求名称</span>
        </div>
        <div>
            <span class="spanLabel_TextAlign_Right">项目描述</span>
            <span><input type="text" class="inputPrj inputText" id="txtPrjDes" value="" /></span>
            <span class="spanLabel_Prompt">*描述</span>
        </div>

        <div style="margin-left:233px">
            <span><button class="buttonOKCancell" id="btnEditPrjOk">确定</button></span>
            <span><button class="buttonOKCancell" id="btnEditPrjCancell">取消</button></span>
        </div>
    </div>
</body>
</html>